<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	var mySheet, myChart;
	
	$(document).ready(function() {
		createSheet();		
		createChart();
	});
	
	function createSheet() {
		var cfg = {SearchMode:2,Page:100,MergeSheet:msPrevColumnMerge};
		var headers = [
	        {Text:"통신사|요금제|요금할인|기본료|청구요금|할인총액|최종할인", Align:"Center"}
	    ];
	    var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
	    var cols = [
	        {Type:"Text",Width:130,Align:"Center"},
	        {Type:"Text",Width:100},
	        {Type:"Int",Width:80, SaveName:"A", Align:"Right"},
	        {Type:"Int",Width:85, SaveName:"B", Align:"Right"},
	        {Type:"Int",Width:85, SaveName:"C", Align:"Right"},
	        {Type:"Int",Width:85, SaveName:"D", Align:"Right"},
	        {Type:"Int",Width:85, Align:"Right"},
	        
	    ];
	    mySheet.SetConfig(cfg);
	    mySheet.InitHeaders(headers,info);
	    mySheet.InitColumns(cols);
	    mySheet.SetEditable(0);
	    mySheet.FitColWidth();
	    mySheet.DoSearch("../data/sheetData3.xml");
	}
	
	function createChart() {
		var cfg = {
		    Chart : {
				Animation : true,
				PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BorderColor : "#84888B",
				Type : "column",
		    },
		    Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
		    Legend : {
		    	Layout : "horizontal",			// Legend 모양 설정
				Align : "center",				// Legend 가로 정렬 설정
				VerticalAlign : "bottom"		// Legend 세로 정렬 설정
		    },
		    YAxis : {
		        LineColor : "#7F7F7F",
		        LineWidth : 1,
		        Title : {
		            Text : ""
		        }
		    }
		}
	
		myChart.SetOptions(cfg);
		myChart.Draw();
	}
	
	function mySheet_OnSearchEnd(Code, Msg, StCode, StMsg) {
		mySheet.FitColWidth();
	}
	
	function chartDraw() {
		myChart.RemoveAll();
		
		var selRows = mySheet.GetSelectionRows(),
			rowsArr = selRows.split("|"),
			selCols = mySheet.GetSelectionCols(),
			colsArr = selCols.split("|"),
			seriestypeArr = [],
			legendseriesnameArr = [],
			i = 0,
			max = 0,
			seriestypeStr = $("#chartType option:selected").val();
			
		if (rowsArr.length == 1 && colsArr.length == 1) {
			alert("2개 이상의 셀을 선택해 주세요.");
			return;
		}
		
		if (colsArr[0]==0) {
			colsArr = colsArr.slice(2);
		} else if (colsArr[0]==1) {
			colsArr = colsArr.slice(1);
		}
		
		for (i=0, max=colsArr.length; i<max; i++) {
			seriestypeArr.push( seriestypeStr );
			legendseriesnameArr.push(mySheet.GetCellValue(0, colsArr[i]));
		}
		
// 		createChart();
		try {
			var param = {
                datadirection:"vertical"
                ,datarowcol:colsArr.join("|")
                ,legendseriesname:legendseriesnameArr.join("|")
                ,legendtitle:"시트와 차트"
                ,startdatarowcol:rowsArr[0]
                ,enddatarowcol:rowsArr[rowsArr.length-1]
                ,labelrowcol:1
                ,startlabelrowcol:rowsArr[0]
                ,endlabelrowcol:rowsArr[rowsArr.length-1]
                ,labeldirection:"vertical"
                ,seriestype:seriestypeArr
        	};
			
			// datadirection		데이터
			// datarowcol			행
            // legendseriesname		시리즈 이름으로 사용하는 헤더
            // legendtitle			제목
            // startdatarowcol
            // enddatarowcol
            // labelrowcol
            // startlabelrowcol
            // endlabelrowcol
            // labeldirection		
            // seriestype			디자인 타입
			
// 			console.log(param);
			sheet2chart(mySheet, myChart, param);
		} catch(e) {
            alert(e.message);
        }
	}
</script>
<title>시트와 차트 연동 예제(3)</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">시트와 차트 연동 예제(3)</div>
	<div id="desc">
		시트의 여러개의 셀을 선택해서 차트에 보여주는 예제 
	</div>

	<div id="functionArea">
		차트 표현
		<select class="input_all" id="chartType" title="막대 선택">
			<option value="bar" >바</option>
			<option value="column" selected>막대</option>
			<option value="area" >영역</option>
			<option value="areaspline" >부드러운 영역</option>
			<option value="line" >꺽은선</option>
			<option value="spline" >부드러운 꺽은선</option>
			<option value="scatter" >산점</option>
		</select>
		<input type="button" value="차트생성" onclick="chartDraw()" />
	</div>
	
	<div id="viewArea">
		<table border="0" width="100%">
			<tr>
				<td width="50%">
					<script type="text/javascript">
						createIBSheet("mySheet", "100%", "300px");
					</script>
				</td>
				<td width="50%">
					<script type="text/javascript">
						createIBChart("myChart", "100%", "300px");
					</script>
				</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>